<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<title></title>
		<style type="text/css">
			*{
					margin: 0;
					padding: 0;
			}
			html,body{
					width: 100%;
					height: 100%;
			}
			body{
					perspective: 1000px;
					transform-style: preserve-3d;
					overflow: hidden;
			}
			.wrap{
					width: 100%;
					height: 100%;
			}
			.open{
					width: 100%;
					height: 100%;
			}
			.num1{
					width: 100%;
					height: 100%;
					background-image: url(img/bg.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;
					/*display: none;*/
			}
			.logo1{
					position: absolute;
					top: 5%;
					left: 8%;
					width: 17%;
					-webkit-animation: "flash" 1s linear 1s;
			}
			.logo2{
					width: 24%;
					position: absolute;
					top: 7%;
					left: 28%;
					-webkit-animation: "flash" 1s linear 1s;
			}
			.logo1 img{
					width: 100%;
			}
			.logo2 img{
					width: 100%;
			}
			.title1{
					position: absolute;
					top: 53%;
					left: 113%;
					width: 92%;	
			}
			.title2{
					position: absolute;
					top: 32%;
					left: -134%;
					width: 60%;
			}
			.title3{
					position: absolute;
					top: 140%;
					left: 20%;
					width: 70%;
			}
			.title1 img{
					width: 100%;	
			}
			.title2 img{
					width: 100%;
			}
			.title3 img{
					width: 100%;
			}
			.challenge{
					position: absolute;
					top: 70%;
					left: -125%;
					width: 90%;
			}
			.challenge img{
					width: 100%;
			}
			.rule{
					position: absolute;
					top: 83%;
					left: 38%;
					width: 25%;
					-webkit-animation: "name" 1s linear forwards;
			}
			@keyframes name {
				from {
					-webkit-transform: translateZ(-1000px);
				}
				to {
					-webkit-transform: translateZ(0px);
				}
			}
			.rule img{
					width: 100%;
			}
			.rule2{
					position: absolute;
					top: 28%;
					left: 13%;
					width: 74%;
			}
			.rule2 img{
					width: 100%;
			}
			.close{
					position: absolute;
					top: 25%;
					left: 79%;
					width: 12%;
			}
			.close img{
					width: 100%;
			}
			.dhl{
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,0.6);
					position: absolute;
					display: none;
			}
			
			.num2{
					width: 100%;
					height: 100%;
					background-image: url(img/background2.png);		
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;	
					/*display: none;*/
			}
			.wel{
					width: 90%;
					position: absolute;
					top: 40%;
					left: 5%;
			}
			.start{
					width: 90%;
					position: absolute;
					top: 51%;
					left: 5%;
			}
			.wanfa{
					width: 90%;
					position: absolute;
					top: 61%;
					left: 5%;
			}
			.wel img{
					width: 100%;
			}
			.start img{
					width: 100%;
			}
			.wanfa img{
					width: 100%;
			}
			
			.num3{
					width: 100%;
					height: 100%;
					background-image: url(img/background3.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;
					display: none;
			}
			.pass{
					width: 70%;
					position: absolute;
					top: 24%;
					left: 14%;
			}
			.pass img{
					width: 100%;
			}
			.goldenkey{
					width: 90%;
					position: absolute;
					top: 42%;
					left: 5%;
			}
			.goldenkey img{
					width: 100%;
			}
			.invite{
					width: 100%;
					position: absolute;
					top: 62%;
					left: 0;
			}
			.invite img{
					width: 100%;
			}
			.rank{
					width: 100%;
					position: absolute;
					top: 72%;
					left: 0;
			}
			.rank img{
					width: 100%;
			}			
			.or{
					width: 100%;
					height: 100%;
					background-color: black;
					display: none;
			}
			.cartoon{
					width: 90%;
					position: absolute;
					top: 2%;
					left: 7%;
			}
			.cartoon img{
					width: 100%;
			}
			.rankrank{
					width: 100%;
					height: 100%;
					background-color: black;
					display: none;
			}
			.ranklist{
					width: 90%;
					position: absolute;
					top: 15%;
					left: 5%;
			}
			.ranklist img{
					width: 100%;
			}
			
			.num4{
					width: 100%;
					height: 100%;
					background-image: url(img/background4.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					display: none;
			}
			.regret{
					width: 80%;
					position: absolute;
					top: 24%;
					left: 14%;
			}
			.regret img{
					width: 100%;
			}
			.goldenkey2{
					width: 94%;
					position: absolute;
					top: 38%;
					left: 3%;
			}
			.goldenkey2 img{
					width: 100%;
			}
			.playagain{
					width: 100%;
					position: absolute;
					top: 62%;
					left: 0;
			}
			.playagain img{
					width: 100%;
			}
			.rank2{
					width: 100%;
					position: absolute;
					top: 72%;
					left: 0;
			}
			.rank2 img{
					width: 100%;
			}
			.rankrankrank{
					width: 100%;
					height: 100%;
					background-color: black;
					display: none;
			}
			
		</style>
	</head>
	<body>
		 <div class="wrap">
		 		<div class="open">
		 			<div class="num1">
		 						<div class="logo1"><img src="img/logo1.png"/></div>
		 						<div class="logo2"><img src="img/logo2.png"/></div>
		 						<div class="title1"><img src="img/1.png"/></div>
		 						<div class="title2"><img src="img/title2.png"/></div>
		 						<div class="title3"><img src="img/title3.png"/></div>
		 						<div class="challenge"><img src="img/challenge.png"/></div>
		 						<div class="rule"><img src="img/rule.png"/></div>
		 					<div class="dhl">
		 						<div class="rule2"><img src="img/rule2.png"/></div>
		 						<div class="close"><img src="img/close.png"/></div>
		 					</div>
		 			</div>
		 			
		 			<div class="num2">
		 					<div class="wel"><img src="img/welcome.png"/></div>
		 					<div class="start"><img src="img/start.png"/></div>
		 					<div class="wanfa"><img src="img/wanfa.png"/></div>
		 			</div>
		 			<!--
		 			
		 			 游戏
		 			 
		 			 -->
		 			 
		 			<!--过关-->
		 			<div class="num3">
		 					<div class="pass"><img src="img/pass.png"/></div>
		 					<div><!--共闯过几个障碍物--></div>
		 					<div class="goldenkey"><img src="img/goldenkey.png"/></div>
		 					<div class="invite"><img src="img/invite.png"/></div>
		 					<div class="rank"><img src="img/rank.png"/></div>
		 			</div>
		 			<div class="or">
		 					<div class="cartoon"><img src="img/cartoon.png"/></div>
		 			</div>
		 			<div class="rankrank">
		 					<div class="ranklist"><img src="img/ranklist.png"/></div>
		 			</div>
		 			
		 			<!--未过关-->
		 			<div class="num4">
		 					<div class="regret"><img src="img/regret.png"/></div>
		 					<div><!--共闯过几个障碍物--></div>
		 					<div class="goldenkey2"><img src="img/goldenkey2.png"/></div>
		 					<div class="playagain"><img src="img/playagain.png"/></div>
		 					<div class="rank2"><img src="img/rank.png"/></div>
		 			</div>
		 			<div class="rankrankrank">
		 				<div class="ranklist"><img src="img/ranklist.png"/></div>
		 			</div>
		 			
		 		</div>
		 </div>
		 
		 <script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	function move(){
		 		$(".title1").animate({
					left:'4%',
    					top:'13%',
				},1500);
				$(".title2").animate({
					left:'34%',
    					top:'32%',
				},1500);
				$(".title3").animate({
					left:'20%',
    					top:'40%',
				},1500);
				$(".challenge").animate({
					left:'5%',
    					top:'70%',
				},1500);				
		 	}
		 	move();
		 	$(document).ready(function() {
				$(".rule").click(function() {
					$(".dhl").css({
						display: "block"
					});
				});
				
				$(".close").click(function() {
					$(".dhl").css({
						display: "none"
					});
				});
				
				$(".challenge").click(function() {
					$(".num1").css({
						display: "none"
					});
					$(".num2").css({
						display: "block"
					});
				});
				
//				<过关>
				$(".start").click(function() {
					$(".num1").css({
						display: "none"
					});
					$(".num2").css({
						display: "none"
					});		
					$(".num3").css({
						display: "none"
					});
					$(".num4").css({
						display: "block"
					});
				});
				
				$(".invite").click(function() {
					$(".num1").css({
						display: "none"
					});
					$(".num2").css({
						display: "none"
					});
					$(".num3").css({
						display: "none"
					});
					$(".or").css({
						display: "block"
					});
					
				$(".or").click(function() {
					$(".or").css({
						display: "none"
				});
					$(".num3").css({
						display: "block"
					});	
				});
				
				$(".rank").click(function() {
					$(".rankrank").css({
						display: "block"
				});
					$(".num3").css({
						display: "none"
					});	
				});
				$(".ranklist").click(function() {
					$(".rankrank").css({
						display: "none"
				});
					$(".num3").css({
						display: "block"
					});	
				});
			});

//				<未过关>
				
				$(".rank2").click(function() {
					$(".rankrankrank").css({
						display: "block"
				});
					$(".num4").css({
						display: "none"
					});	
				});
				$(".ranklist").click(function() {
					$(".rankrankrank").css({
						display: "none"
				});
					$(".num4").css({
						display: "block"
					});	
				});
	
	
	
	

		});
		 </script>
	</body>
</html>
